/*
 * @Description: 文章列表item
 * @Author: kanglin
 * @Date: 2018-11-14 09:26:49
 * @Copyright: Created by Panxsoft.
 */

<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    @import '~src/assets/css/common.less';
    @deep: ~">>>";
    .v-com-article-item{
        height:184 *@rem-per-px;
        padding:16*@rem-per-px 40*@rem-per-px 16*@rem-per-px 32*@rem-per-px;
    }
    .v-com-article-item::after{
        content: '';
        display: block;
        clear: both;
        height: 0;
        font-size: 0;
    }
    .info{
        float: left;
        width: 392*@rem-per-px;
    }
    .info__title{
        font-size: 28*@rem-per-px;
        font-weight: normal;
        height: 152*@rem-per-px;
        color: #232931;
        line-height: 35*@rem-per-px;
    }
    .info__date{
        color: #BBBDC0;
        font-size: 20*@rem-per-px;
    }
    .thumb{
        margin-left: 414*@rem-per-px;
        width: 264*@rem-per-px;
        height: 184*@rem-per-px;
        &>img{
            width: 100%;
            height: 100%;
        }
    }
</style>

<template>
	<div class="v-com-article-item">
		<div class="info">
			<h3 class="info__title">{{ title }}</h3>
			<p class="info__date">{{ $t('article.read') + $t('common.colon') + count }}</p>
		</div>
		<div class="thumb">
			<img
				v-lazy="thumb"
				alt="">
		</div>
	</div>
</template>

<script>
/**
* 首页文章列表item
* @vue-prop {string} [title=''] 文章标题
* @vue-prop {number} [count=0]	阅读量
* @vue-prop {string} [thumb='']	封面图片地址
*/

export default {
	name: 'ArticleItem',
	props: {
		thumb: {
			type: String,
			default() {
				return '';
			},
		},
		title: {
			type: String,
			default() {
				return '';
			},
		},
		count: {
			type: Number,
			default() {
				return '';
			},
		},

	},
	data() {
		return {
		};
	},
	methods: {},
};
</script>
